import React from 'react';
import { Breadcrumb, Icon, Table, Button, Modal } from 'antd';
import './floor.less';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token');

export default class Floor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            floorList: [],
        }
    }
    componentDidMount() {
        this.getFloorList();
    }
    //获取楼层列表
    getFloorList() {
        $.ajax({
            url: `${config.JuseHomepage}/floor/list`,
            type: "get",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                if (res.code === 200) {
                    const floorList = res.data;
                    if (floorList.length > 0) {
                        floorList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                        this.setState({
                            floorList
                        });
                    } else {
                        this.setState({
                            floorList
                        })
                    }
                }
            }
        });
    }
    //删除楼层
    deleteFloor(id) {
        Modal.confirm({
            title: '删除',
            content: '温馨提示：删除后不可恢复，是否继续删除？',
            onOk: () => {
                $.ajax({
                    url: `${config.JuseHomepage}/floor/delete`,
                    type: "post",
                    async: true,
                    data: { id },
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    success: res => {
                        if (res.code === 200) {
                            this.getFloorList();
                        }
                    }
                });
            }
        });
    }
    //新增楼层
    addFloor() {
        if (this.state.floorList.length < 10) {
            window.location.hash = `/floordetail/0`
        } else {
            Modal.warning({
                title: '新增失败',
                content: `楼层最多只能添加10个，请先删除再添加！`,
            });
        }
    }
    render() {
        const columns = [{
            title: '序号',
            dataIndex: 'index',
            width: 50,
        }, {
            title: '楼层名称',
            dataIndex: 'floorName',
            width: 100,
        }, {
            title: '楼层主图',
            dataIndex: 'imgName',
            width: 100,
            render: (text, record) => (
                <a href={config.Filepath + record.imgName} target="_blank">
                    <img src={config.Filepath + record.imgName} style={{ height: "50px", width: "auto" }} />
                </a>
            )
        }, {
            title: '链接地址',
            dataIndex: 'link',
            width: 200,
        }, {
            title: '操作',
            key: 'edit',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => window.location.hash = `/floordetail/${record.id}`}>编辑</a>
                </span>
            )
        }, {
            title: '操作',
            key: 'delete',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => this.deleteFloor(record.id)}>删除</a>
                </span>
            )
        }];
        return (
            <div className='goods-label'>
                <div className='goods-label-cont clearfix'>
                    <div className='goods-label-cont-nav clearfix'>
                        <Breadcrumb separator=">">
                            <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                            <Breadcrumb.Item>楼层管理</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div className='allgoods-table clearfix'>
                        <Table
                            className="floor-table"
                            rowKey="id"
                            columns={columns}
                            dataSource={this.state.floorList}
                            pagination={false}
                            bordered
                        />
                        <div className='goods-label-tabletr'>
                            <Button className='goods-label-table-app' width={160} icon="plus" onClick={() => this.addFloor()}>新增</Button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}